<template>
  <div class="pay-page page">
    <el-form :model="searchForm" label-position="left" inline label-suffix=":" size="small" label-width="80px" style="padding-left:6px">
      <el-form-item label="选择年份">
        <!-- <el-input v-model="searchForm.name" placeholder="请选择年份" clearable></el-input> -->
        <el-date-picker v-model="searchForm.year" type="year" placeholder="选择年份查询" value-format="yyyy" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="chart-box">
      <div id="main" ref="chart" style="width: 100%;height:600px;"></div>
    </div>
  </div>
</template>
           
<script>
import { paymentStatistics, lessionStatistics } from "@/api/user";
export default {
  data() {
    return {
      mychart: null,
      searchForm: {
        year: ''
      },
      year: new Date().getFullYear(),
      income: [],
      shopcost: [],
      paywage: []
    }
  },
  mounted() {
    this.mychart = this.$echarts.init(document.getElementById('main'));
    this.getData()
  },
  methods: {
    async getData() {
      const res = await paymentStatistics.post(this.searchForm);
      // let res = {
      //   data: {
      //     year: 2020,
      //     income: [],
      //     shopcost: [],
      //     paywage: [],
      //   },
      //   resultCode: "000000",
      //   resultInfo: "成功"
      // }
      if (res.resultCode === "000000") {
        if (res.data.income) {
          this.year = res.data.year || (this.searchForm.year ? this.searchForm.year : new Date().getFullYear())
          // 收入数组
          this.income = res.data.income
          // 店务支出
          this.shopcost = res.data.shopcost
          // 工资支出
          this.paywage = res.data.paywage
        } else {
          this.year = this.searchForm.year ? this.searchForm.year : new Date().getFullYear()
          this.income = res.data[0] ? res.data[0] : []
          this.shopcost = res.data[1] ? res.data[1] : []
          this.paywage = res.data[2] ? res.data[2] : []
        }
        this.draw()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    getOptions() {
      return {
        title: {
          text: '【' + this.year + '年】收支情况统计'
        },
        tooltip: {
          trigger: 'axis',
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 100,
          top:100
        },
        legend: {
          data: ['收入', '店务支出', '工资支出']
        },
        xAxis: this.getXios(),
        yAxis: {
          // name: '金额/元'
        },
        series: this.getSeries()
      }
    },
    getXios() {
      const Xios = []
      for (let index = 1; index < 13; index++) {
        Xios.push(index + '月')
      }
      return {
        // name: '月份',
        data: Xios
      }
    },
    getSeries() {
      const seies = [
        {
          name: '收入',
          type: 'line',
          data: this.income,
          barWidth: 50,//柱图宽度
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              },
              color: '#f9957f'
            }
          },
        },
        {
          name: '店务支出',
          type: 'bar',
          data: this.shopcost,
          // barWidth: 50,//柱图宽度
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  // color: '#800080'
                }
              },
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#eebd89'
              }, {
                offset: 1,
                color: '#d13abd'
              }])
            }
          },
        },
        {
          name: '工资支出',
          type: 'bar',
          data: this.paywage,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  // color: '#800080'
                }
              },
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#c973ff'
              }, {
                offset: 1,
                color: '#aebaf8'
              }])
            }
          },
        },
      ]
      return seies
    },
    draw() {
      this.mychart.setOption(this.getOptions());
    }
  }
}
</script>
<style lang='scss'>
.pay-page {
  width: 100%;
  .chart-box {
    margin-top: 50px;
  }
}
</style>